<script setup>
  import { reactive, ref, watch } from "vue";
  const count = ref(0);
  const user = reactive({
    name: "tom",
    info: {
      gender: "男",
      age: 18,
    },
  });
  
  // 2. 监听多个响应式数据
  // watch([数据1, 数据2, ...], 改变后回调函数)
watch(() => user.name, (newData) => {
  console.log(`数据变化了,${newData}`);
})
watch(() => user.info.age, (newData) => {
  console.log(`数据变化了,${newData}`);
})
  
  
  // 2s改变数据
  setTimeout(() => {
   user.name='jack'
  }, 2000);
  
  // 4s改变数据
  setTimeout(() => {
    user.info.age++;
  }, 4000);
</script>

<template>
  <p>计数器：{{ count }}</p>
  <p>
    姓名：{{ user.name }} 性别：{{ user.info.gender }} 年龄：{{ user.info.age }}
  </p>
</template>